<template>
  <div>
    <Modal
      v-model="modals"
      width="1000"
	  height="500"
      scrollable
      closable
      :title="titleFrom"
      :mask-closable="false"
      :z-index="1"
      @on-cancel="handleReset"
	  @on-confirm="handleSubmit"
      @on-visible-change="visible"
    >
      <Table
        :columns="columns"
        :data="tableData"
        ref="table"
        :loading="loading"
        highlight-row
        no-data-text="暂无数据"
        no-filtered-data-text="暂无筛选结果"
        @on-select="handleSelectRow"
        @on-select-cancel="handleCancelRow"
        @on-select-all="handleSelectAll"
        @on-select-all-cancel="handleSelectAll"
        class="orderData mt25"
      >
        <template slot-scope="{ row, index }" slot="id">
          {{index+1}}
        </template>
        <template slot-scope="{ row, index }" slot="type">
           <span v-if="row.cate_type == 0">产品</span>
           <span v-else>服务</span>
		   ｜<span>{{row.cate_id_name}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="current_num">
           <span v-if="row.cate_type == 0">{{row.current_num}}</span>
           <span v-else>-</span>
        </template>
        <template slot-scope="{ row, index }" slot="old_num">
           <span v-if="row.cate_type == 0">{{row.old_num}}</span>
           <span v-else>-</span>
        </template>
		
        <template slot-scope="{ row, index }" slot="action">
          <a v-if="row.subs.length == 0" @click="selectItem(row)">选择</a>
        </template>
      </Table>
      <div class="acea-row row-right page">
        <Page
          :total="page.total"
          :current="page.pageNum"
          show-elevator
          show-total
          @on-change="pageChange"
          :page-size="page.pageSize"
          @on-page-size-change="limitChange"
        /> 
      </div>
	  <div slot="footer">
	    <Button @click="cancel()">取消</Button>
	    <Button type="primary" @click="cancel()">确定</Button>
	  </div>
    </Modal>
  </div>
</template>

<script>
import { saveApi,ListDicApi} from '@/api/archives';
import { ListAllApi} from '@/api/platproduct';
import icon from '@/utils/icon';
import { getCookies } from '@/libs/util';
import subTable from './subTable'; 
export default {
  name: 'archiveFrom',
  props: {
    formValidate: {
      type: Object,
      default: null,
    },
    titleFrom: {
      type: String,
      default: '',
    },
  },
  components: {subTable},
  data() {
    return {
      arrs: [],
      searchRule: '',
      iconVal: '',
      grid: {
        xl: 12,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      modal12: false,
      ruleValidate: {
		name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
		birthday: [{ required: true, message: '请选择出生日期', trigger: 'blur' }],
		phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
      },
	  loading: false,
	  tableData: [],
      columns: [
      		{
          title: '序号',
          align: 'center',
          slot: 'id',
          width: 80,
        },
		{
			type: 'expand',
			width: 50,
			render: (h, params) => {
			   
			  return h(subTable, {
			    props: {
			      datas: params.row.subs,
				  receiveData:this.selectItem
			    }
			  });
			},
			
		},
		{
		  title: '产品名称',
		  align: 'left',
		  key: 'name',
		  minWidth: 150,
		},
		{
		  title: '单价',
		  align: 'center',
		  key: 'price',
		  minWidth: 100,
		},
		{
		  title: '描述',
		  align: 'center',
		  key: 'remark',
		  minWidth: 250,
		},
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 100,
          align: 'center',
        },
      ],
	  page: {
	    total: 0, // 总条数
	    pageNum: 1, // 当前页
	    pageSize: 10, // 每页显示条数
	  },
      valids: false,
      list: icon,
      authType: true,
      search: icon,
	  header: {},
      fileUrl: '/adminapi/file/upload_file/1',
	  files:[]
    };
  },
  watch: {
    'formValidate.header': function (n) {
      this.formValidate.is_header = n ? 1 : 0;
    },
    'formValidate.auth_type': function (n) {
      if (n === undefined) {
        n = 1;
      }
      this.authType = n === 1;
    },
    'formValidate.data': function (n) {},
  },
  mounted() {
    this.getData();
  },
  computed: {
  },
  methods: {
    init() {
      this.searchRule = '';
      this.arrs = [];
    },
	// 上传成功
	handleSuccess(res, file) {
	  if (res.status === 200) {
		this.files.push(res.data.data);
	    this.$Message.success(res.msg);
	  } else {
	    this.$Message.error(res.msg);
	  }
	},
	handleFormatError(file) {
		
	},
	handleMaxSize(file) {
	  this.$Message.warning('请上传文件30M以内的文件');
	},
	delFile(index){
		this.files.splice(index,1);
	},
	// 上传头部token
	getToken() {
	  this.header['Authori-zation'] = 'Bearer ' + getCookies('token');
	  console.info(this.header);
	},
    handleCreate1(val) {
      this.headerOptionsList.push({
        value: val,
        label: val,
      });
    },
	getData() {
		this.loading = true;
		ListAllApi({
		  page: this.page.pageNum,
		  limit: this.page.pageSize,
		  keywords:this.keywords
		})
		  .then(async (res) => {
		    let data = res.data;
		    this.tableData = data.list;
		    this.page.total = data.count;
		    this.loading = false;
		  })
		  .catch((res) => {
		    this.loading = false;
		    this.$Message.error(res.msg);
		  });
	},
    // 获取客户数据
    getAddFrom() {
		let that = this;
        ListDicApi()
        .then(async (res) => {
			that.docs = res.data['docs'];
			that.peoples = res.data['peoples'];
			that.groups = res.data['groups'];
			that.recs = res.data['recs'];
			that.sources = res.data['sources'];
			that.tags = res.data['tags'];
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
	cancel(){
		this.modals = false;
	},
    // 提交
    handleSubmit() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.valids = true;
          saveApi(this.formValidate)
            .then(async (res) => {
              this.$Message.success(res.msg);
              this.modals = false;
            })
            .catch((res) => {
              this.$Message.error(res.msg);
            });
        } else {
			if (!this.formValidate.name) return this.$Message.error('请输入姓名！');
			if (!this.formValidate.birthday) return this.$Message.error('请选择出生日期！');
			if (!this.formValidate.phone) return this.$Message.error('请输入联系电话！');
        }
      });
    },
    handleReset() {
      this.modals = false;
      this.authType = true;
      this.$refs['formValidate'].resetFields();
    },
	selectItem(row){
		if(row['type'] == 0 && row['current_num'] == 0)return this.$Message.error('【'+row.name+'】库存不足');
		row.num = 1;
		row.old_price = row.price;
		row.remark = '';
        this.$emit('receiveData',row);
	},
	  pageChange(index) {
		this.page.pageNum = index;
		this.getData();
	  },
	  limitChange(limit) {
		this.page.pageSize = limit;
		this.getData();
	  },
  },
  created() {
    this.list = this.search;
    this.getToken();
    this.getAddFrom();
  },
};
</script>

<style scoped>
.trees-coadd {
  width: 100%;
  height: 500px;
  border-radius: 4px;
  overflow: hidden;
}
.scollhide {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin-left: 18px;
  padding: 10px 0 10px 0;
  box-sizing: border-box;
}
.content {
  font-size: 12px;
}

.time {
  font-size: 12px;
  color: #2d8cf0;
}

.icons-item {
  float: left;
  margin: 6px 6px 6px 0;
  width: 53px;
  text-align: center;
  list-style: none;
  cursor: pointer;
  height: 50px;
  color: #5c6b77;
  transition: all 0.2s ease;
  position: relative;
  padding-top: 10px;
}
.icons-item .ivu-icon {
  font-size: 16px;
}
.search-rule {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f2f2f2;
}
.rule {
  display: flex;
  flex-wrap: wrap;
  max-height: 700px;
  overflow: scroll;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.rule::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
.rule::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
.rule::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #555;
}
.rule-list {
  background-color: #f2f2f2;
  width: 32%;
  margin: 5px;
  border-radius: 3px;
  padding: 10px;
  color: #333;
  cursor: pointer;
  transition: all 0.1s;
}
.rule-list:hover {
  background-color: #c5d1dd;
}
.rule-list div {
  white-space: nowrap;
}
.select-rule {
  background-color: #c5d1dd;
}
.sec{
	width: 100px;
}
.add {
  display: flex;
  align-items: center;
}
.df {
  display: flex;
  justify-content: center;
}

.file{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.file:hover{
	background-color: #edf7fe;
}
.close-bg{
	display: inline-block;
	width: 35px;
	height: 35px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-right: 15px;;
}

.close-bg:hover{
	cursor: pointer;
}

.close {
	display: inline-block;
	width: 15px;
	height: 2px;
	background: red;
	transform: rotate(45deg);
}

.close::after {
	content: '';
	display: block;
	width: 15px;
	height: 2px;
	background: red;
	transform: rotate(-90deg);
}

</style>
